<template>
  <div class="page-content">
    <MenuBar v-if="!isMobile" passTab="1" />

    <PhoneMenuBar v-else />

    <div style="height: 70px;"></div>

    <div :style="{ 'padding': isMobile ? '5px 12px' : '5px 250px' }" class="breadcrumb-bar" v-if="!isMobile">

      <n-breadcrumb separator=">">
        <n-breadcrumb-item>
          <RouterLink to="/">
            <n-icon size="16" color="#999999">
              <Home />
            </n-icon>首页

          </RouterLink>

        </n-breadcrumb-item>
        <n-breadcrumb-item>
          <RouterLink to="/product">
            产品中心
          </RouterLink>

        </n-breadcrumb-item>
        <n-breadcrumb-item>
          {{ pInfo.title }}
        </n-breadcrumb-item>
      </n-breadcrumb>
    </div>

    <div class="page-product">

      <div style="display: flex;justify-content: space-between;align-items: center; margin-top: 15px;">
        <div class="item-title">{{ pInfo.title }}</div>

        <div class="item-number">货号：{{ pInfo.prop_list != null && pInfo.prop_list.length != 0 ?
          (pInfo.prop_list[3]["value"] || '-') : '-' }}</div>
      </div>



      <div class="item-brand">品牌：{{ pInfo.prop_list != null && pInfo.prop_list.length != 0 ?
        (pInfo.prop_list[0]["value"] || '暂无') : '暂无' }}</div>


      <div style="display: flex;justify-content: space-between;align-items: end; margin-top: 5px;">
        <div class="item-addtime">发售时间：{{ pInfo.addtime }}</div>

        <div class="item-money">售价：{{ pInfo.prop_list != null && pInfo.prop_list.length != 0 ?
          (pInfo.prop_list[2]["value"] || '-') : '-' }}円</div>
      </div>

      <div style="margin-top: 20px;background: white; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1)">
        <n-config-provider :theme-overrides="themeOverrides" v-if="imageUrls.length">
          <n-carousel draggable show-arrow>
            <img class="item-pic" v-for="imgurl in imageUrls" :src="imgurl" :key="imgurl" />
          </n-carousel>
        </n-config-provider>


        <img :src="pInfo.imgurl?.startsWith('../') ? API_URL + pInfo.imgurl.substring(2) : pInfo.imgurl"
          class="item-pic" v-else />
      </div>



      <div class="item-descript" v-if="pInfo.description != ''">
        <p>{{ pInfo.description }}</p>
      </div>

      <div class="rich-layout" v-if="pInfo.content != ''">
        <div class="rich-text-content" v-html="pInfo.content"></div>
      </div>



    </div>

    <BottomBar />
  </div>
</template>

<script setup name="productListPage">
import { Home } from '@vicons/ionicons5'
import { API_URL } from '@/config'
import { getProductInfo } from '@/api'
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import MenuBar from '@/components/MenuBar.vue'
import PhoneMenuBar from '@/components/PhoneMenuBar.vue'
import BottomBar from '@/components/BottomBar.vue'
// 创建一个响应式变量来存储是否为移动设备
const isMobile = ref(false);

// 定义一个函数来检查用户代理
const checkDevice = () => {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;

  // 设置isMobile的值
  isMobile.value = /android/i.test(userAgent) || /iPhone|iPad|iPod/i.test(userAgent);
};


const pInfo = ref({})
const imageUrls = ref([])

const checkProductInfo = async () => {
  const params = {
    id: route.query.productId || -1,
  }
  const result = await getProductInfo(params)

  console.log("newsList", result)

  if (result != null && result.data != null) {

    pInfo.value = result.data

    // 提取所有图片 URL
    if (result.data.displayimg != null && result.data.displayimg != '') {
      imageUrls.value = result.data.displayimg?.split('|').map(item => {
        const parts = item.split('*');
        const realImgUrl = parts[1]?.startsWith('../') ? API_URL + parts[1].substring(2) : parts[1]
        return realImgUrl; // 第二部分是 URL（索引为 1）
      });

    }

  }
}


const route = useRoute()



onMounted(() => {
  checkDevice();

  checkProductInfo()
});


const themeOverrides = {
  Carousel: {
    // 修改激活且悬停时的文字颜色
    dotColor: '#999999', // 例如改为红色
    dotColorActive: '#00aeff', // 例如改为红色
    // 其他常用颜色也可一并定制：
    // itemColorActive: 'darkblue',           // 激活状态下的文字颜色（非悬停）
    // itemColorHover: 'orange',               // 非激活但悬停时的颜色
    // itemColor: '#333',                      // 默认文字颜色
    // itemColorActiveCollapsed: 'lightblue',  // 折叠菜单中激活项颜色
  }
}

</script>

<style scoped lang="scss">
/* 容器样式 */
.page-content {
  width: 100vw;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;

  .breadcrumb-bar {
    background: #eeeeee;
    display: flex;
    align-items: center;
  }


  @media (min-width: 769px) {
    .page-product {
      min-height: 450px;
      padding: 5px 250px;

      .item-title {
        font-size: 30px;
        color: #111111;
        font-weight: bold;
        line-height: 140%;
      }

      .item-brand {
        color: #999999;
        font-size: 12px;
        margin-top: 10px;
        font-weight: 400;
      }

      .item-addtime {
        color: #111111;
        font-size: 14px;
        margin-top: 5px;
      }

      .item-number {
        color: #111111;
        font-size: 14px;
        font-weight: 500;
      }

      .item-money {
        color: #111111;
        font-size: 18px;
        font-weight: bold;
      }

      .item-descript {
        margin-top: 10px;
        background: white;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
        padding: 20px;
        color: #111111;
        font-size: 14px;
        line-height: 170%
      }

      .item-pic {
        display: flex;
        justify-content: center;
        object-position: center;
        width: 100%;
        height: auto;
        max-height: 90vh;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
        object-fit: cover;
      }
    }
  }

    /* 手机端样式 */
  @media (max-width: 768px) {
   .page-product {
      min-height: 450px;
      padding: 5px 8px;

      .item-title {
        font-size: 18px;
        color: #111111;
        font-weight: bold;
        line-height: 140%;
         flex: 1;
      }

      .item-brand {
        color: #999999;
        font-size: 14px;
        margin-top: 10px;
        font-weight: 400;
      }

      .item-addtime {
        color: #111111;
        font-size: 14px;
        margin-top: 5px;
      }

      .item-number {
        color: #111111;
        font-size: 14px;
        font-weight: 500;
      }

      .item-money {
        color: #111111;
        font-size: 16px;
        font-weight: bold;
      }

      .item-descript {
        margin-top: 10px;
        background: white;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
        padding: 10px;
        color: #111111;
        font-size: 14px;
        line-height: 170%
      }

      .item-pic {
        display: flex;
        justify-content: center;
        object-position: center;
        width: 100%;
        height: auto;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
        object-fit: cover;
      }
    }
  }

  .rich-layout {
    margin-top: 10px;
    width: 100%;


    .rich-text-content {
      box-sizing: border-box;
      padding: 15px;
      background: white;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
    }

    .rich-text-content * {
      max-width: 100%;
      box-sizing: border-box;
      word-wrap: break-word;
    }

    :deep(.rich-text-content img) {
      width: 100% !important;
      max-width: 100% !important;
      height: auto;
      display: block;
      margin: 0px auto;
    }

    :deep(.rich-text-content p) {
      margin: 0;
      // text-align: center;
    }

    :deep(.rich-text-content ul) {
      max-width: 100% !important;
    }
  }

  :deep(.n-carousel .n-carousel__arrow) {
    background-color: #999999 !important;
  }





}
</style>